<template>
  <div>
    <el-dialog
      :title="isPublish ? '审核发布' : '提交审核'"
      width="1200px"
      custom-class="gov-implement-list-check"
      :visible.sync="visible"
      :append-to-body="true"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <div v-loading="loading.modal">
        <div class="tableBox">
          <el-table ref="multipleTable" border :data="changeList" tooltip-effect="dark" style="width: 100%">
            <el-table-column prop="date" label="申请时间" width="171"></el-table-column>
            <el-table-column prop="user" label="申请人" width="100"></el-table-column>
            <el-table-column prop="eventName" label="实施清单" show-overflow-tooltip></el-table-column>
            <el-table-column prop="commonCharacterCode" label="审核内容"></el-table-column>
            <el-table-column prop="oldValue" label="原内容"></el-table-column>
            <el-table-column prop="newValue" label="新内容"></el-table-column>
          </el-table>
        </div>
        <el-form
          ref="form"
          :inline="true"
          style="margin-top: 60px"
          :rules="rules"
          :model="formData"
          class="demo-form-inline"
        >
          <el-row v-if="isPublish">
            <el-col :span="24">
              <el-form-item style="margin-top: 60px" prop="pass" label="审核决定：">
                <el-radio-group v-model="formData.pass">
                  <el-radio :label="true" border>审核通过</el-radio>
                  <el-radio :label="false" border>审核不通过</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item style="width: 100%" prop="reason" label="审核备注：">
                <el-input
                  style="width: 900px"
                  type="textarea"
                  :rows="4"
                  placeholder="请输入内容"
                  v-model="formData.reason"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="loading.submit" @click="submit">提交</el-button>
        <el-button type="info" plain @click="handleClose">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios';
  export default {
    components: {},
    props: {
      visible: {
        type: Boolean
      },
      checkChangeList: {
        type: Array,
        default: () => {
          return [];
        }
      },
      checkData: {
        type: Object
      },
      isPublish: {
        type: Boolean,
        default: () => {
          return false;
        }
      }
    },
    data() {
      return {
        formData: {
          reason: '',
          pass: true
        },
        rules: {
          pass: [{ required: true, message: '请选择审核决定', trigger: 'blur' }],
          reason: [{ required: true, message: '请输入审核备注', trigger: 'blur' }]
        },
        loading: {
          submit: false
        },
        changeList: []
      };
    },
    watch: {
      visible: {
        handler(val) {
          this.changeList = JSON.parse(JSON.stringify(this.checkChangeList));
          this.changeList = this.changeList.map((e) => {
            return {
              date: this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
              user: '自己',
              eventName: this.checkData.name,
              commonCharacterCode: e.commonCharacterCode,
              oldValue: e.eventCharacterBeforeLabel || e.eventCharacterBefore,
              newValue: e.eventCharacterAfterLabel || e.eventCharacterAfter
            };
          });
          if (val && this.isPublish) {
            this.getRecords();
          } else {
            this.$refs['form'].resetFields();
          }
        }
      }
    },
    computed: {},
    methods: {
      handleClose() {
        this.$emit('update:visible', false);
      },
      async submit() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            this.loading.submit = true;
            if (this.isPublish) {
              // 发布审核
              this.publishRequest();
            } else {
              // 提交审核
              this.checkRequest();
            }
          }
        });
      },
      // 提交审核
      async checkRequest() {
        const { data } = await axios.request({
          url: '/api/v1/event/implementation/approval',
          method: 'post',
          data: {
            id: this.checkData.id,
            items: this.checkChangeList,
            reason: this.formData.reason
          }
        });
        this.loading.submit = false;
        if (data.success) {
          this.handleClose();
          this.$message.success('提交审核成功');
          this.$emit('success');
        }
      },
      // 发布
      async publishRequest() {
        const { data } = await axios.request({
          url: `/api/v1/event/implementation/approved/${this.checkData.id}`,
          method: 'get',
          params: {
            type: this.formData.pass,
            reason: this.formData.reason
          }
        });
        this.loading.submit = false;
        if (data.success) {
          this.handleClose();
          this.$message.success('操作成功');
          this.$emit('success');
        }
      },
      async getRecords() {
        this.loading.modal = true;
        const { data } = await axios.request({
          url: '/api/v1/event/implementation/approvalHistory/dsp',
          method: 'get',
          params: {
            eventId: this.checkData.id,
            pageNum: 1,
            pageSize: 10000
          }
        });
        this.loading.modal = false;
        if (data.success) {
          this.changeList = data.result.records || [];
          this.changeList = this.changeList.map((e) => {
            return {
              date: e.changeApplyDate,
              user: e.approvalUser,
              eventName: this.checkData.name,
              commonCharacterCode: e.commonCharacterCode,
              oldValue: e.eventCharacterBeforeLabel || e.eventCharacterBefore,
              newValue: e.eventCharacterAfterLabel || e.eventCharacterAfter
            };
          });
        }
      }
    },
    created() {},
    mounted() {}
  };
</script>
<style lang="scss">
  .gov-implement-list-check {
    .el-dialog__body {
      .tableBox {
        padding: 0;
      }
      .reason {
        h2 {
          font-weight: bold;
          margin: 20px 0;
        }
      }
    }
    .el-dialog__footer {
      text-align: center;
    }
  }
</style>
